{% extends 'generic/object_list.html' %}
{% load helpers %}
{% load static %}

{% block buttons %}
    <button class="btn btn-secondary toggle-fullname" selected="selected">
        <span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Device Full Name
    </button>
    <button class="btn btn-secondary toggle-images" selected="selected">
        <span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
    </button>
    <div class="btn-group" role="group">
        <a href="{% django_querystring face='front' %}"
           class="btn btn-primary{% if rack_face == 'front' %} bg-primary nb-text-body-bg{% endif %}">
            <span class="mdi mdi-flip-to-front"></span> Front
        </a>
        <a href="{% django_querystring face='rear' %}"
           class="btn btn-primary{% if rack_face == 'rear' %} bg-primary nb-text-body-bg{% endif %}">
            <span class="mdi mdi-flip-to-back"></span> Rear
        </a>
    </div>
    <div class="btn-group" role="group">
        <a href="{% django_querystring reverse=None %}"
           class="btn btn-primary{% if not reverse %} bg-primary nb-text-body-bg{% endif %}">
            <span class="mdi mdi-arrow-right"></span> Normal
        </a>
        <a href="{% django_querystring reverse='true' %}"
           class="btn btn-primary{% if reverse %} bg-primary nb-text-body-bg{% endif %}">
            <span class="mdi mdi-arrow-left"></span> Reversed
        </a>
    </div>
{% endblock %}

{% block table %}
    {% if page %}
        <div style="white-space: nowrap; overflow-x: scroll;">
            {% for rack in page %}
                <div style="display: inline-block; margin-right: 12px; width: 254px">
                    <div style="margin-left: 30px">
                        <div class="text-center">
                            <strong>{{ rack|hyperlinked_object }}</strong>
                            {% if rack.role %}
                                <br /><small class="badge" style="color: {{ rack.role.color|fgcolor }}; background-color: #{{ rack.role.color }}">{{ rack.role }}</small>
                            {% endif %}
                            {% if rack.facility_id %}
                                <br /><small class="text-secondary">{{ rack.facility_id }}</small>
                            {% endif %}
                        </div>
                        {% include 'dcim/inc/rack_elevation.html' with object=rack face=rack_face %}
                        <div class="clearfix"></div>
                        <div class="text-center">
                            <strong>{{ rack|hyperlinked_object }}</strong>
                            {% if rack.facility_id %}
                                <small class="text-secondary">({{ rack.facility_id }})</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <br />
        {% include 'inc/paginator.html' %}
    {% else %}
        <p>No racks found</p>
    {% endif %}
{% endblock %}


{% block javascript %}
    {{ block.super }}
    <script src="{% versioned_static 'js/rack_elevations.js' %}"></script>
{% endblock %}
